<!-- 列表 -->
<template>
	<view class="list">
		<view class="list-item" v-for="item in list" :key="item.id">
			<view class="left" :class="{'disabled': item.status == 3 || item.status == 4}">
				<!-- 满减 -->
				<view v-if="item.type_id == 1" class="mj coupon">
					<text class="unit">￥</text>
					<text class="value">{{Number(item.discount)}}</text>
				</view>
				<!-- 折扣 -->
				<view v-if="item.type_id == 2" class="zk coupon">
					<text class="value">{{Number(item.discount)}}</text>
					<text class="unit">折</text>
				</view>
				<view class="condition">满{{Number(item.min_amount)}}使用</view>
			</view>
			<view class="right">
				<text class="type">{{item.type_name}}</text>
				<text class="expire">有效期到：{{item.expire_date}}</text>
			</view>
		</view>

		<!-- 暂无数据 -->
		<c-empty-data v-if="!list.length && !loadingState.default" :empty-text="emptyText"></c-empty-data>
		<!-- loading -->
		<view style="margin-top: 20rpx;">
			<c-loading :loadingState="loadingState"></c-loading>
		</view>
	</view>

</template>

<script setup>
	import { computed } from 'vue';
	import { storeToRefs } from 'pinia';
	import { useCouponStore } from "../store.js";

	const store = useCouponStore();
	const { status, list, loadingState } = storeToRefs(store);
	const couponType = {
		1: '满减券',
		2: '折扣券'
	}

	const emptyText = computed(() => {
		if (store.status == 2) return '暂无优惠券可使用哦~';
		if (store.status == 3) return '暂无已使用优惠券哦~';
		if (store.status == 4) return '暂无已过期优惠券哦~';
		return '';
	})
</script>

<style lang="scss" scoped>
	$redColor: #FE3333;

	.list {
		padding: 0 40rpx;

		&-item {
			display: flex;
			height: 180rpx;
			border-radius: 20rpx;
			margin-top: 30rpx;
			overflow: hidden;

			.left {
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 180rpx;
				height: 100%;
				color: white;
				background-color: $redColor;
				background: radial-gradient(circle 14rpx at 100% 0, transparent 98%, $redColor) right top no-repeat,
					radial-gradient(circle 14rpx at 100% 100%, transparent 98%, $redColor) right bottom no-repeat,
					linear-gradient(to right, $redColor, $redColor) left top no-repeat,
					linear-gradient(to right, $redColor, $redColor) left bottom no-repeat;
				background-size: 50% 50%;

				&.disabled {
					background-color: #888;
					background: radial-gradient(circle 14rpx at 100% 0, transparent 98%, #888) right top no-repeat,
						radial-gradient(circle 14rpx at 100% 100%, transparent 98%, #888) right bottom no-repeat,
						linear-gradient(to right, #888, #888) left top no-repeat,
						linear-gradient(to right, #888, #888) left bottom no-repeat;
					background-size: 50% 50%;
				}

				.coupon {
					.unit {
						font-size: 30rpx;
					}

					.value {
						font-size: 60rpx;
						font-weight: bold;
					}
				}

				.condition {
					font-size: 28rpx;
					margin-top: 20rpx;
				}
			}

			.right {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				background-color: white;
				background: radial-gradient(circle 14rpx at 0 0, transparent 98%, white) left top no-repeat,
					radial-gradient(circle 14rpx at 0 100%, transparent 98%, white) left bottom no-repeat,
					linear-gradient(to right, white, white) right top no-repeat,
					linear-gradient(to right, white, white) right bottom no-repeat;
				background-size: 50% 50%;

				.type {
					font-size: 34rpx;
					font-weight: bold;
				}

				.expire {
					font-size: 30rpx;
					color: #888;
				}
			}
		}
	}
</style>